<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index04-DOM操作</title>
  <style type="text/css">
    .aaa{
      background-color: green;
      width: 200px;
      height: 200px;
    }
    .bbb {
      color: burlywood;
    }
    .ccc {
      font-size: 40px;
    }
    .ddd {
      font-family: 楷体;
    }
  </style>
</head>
<body>
<form action="#" method="post">
  <input type="hidden" value="100" name="id"/>
  用户名:<input type="text" name="username"/><br />
  密码:<input type="password" name="password"/><br />
  性别:<input type="radio" value="男" name="gender"/>男
  <input type="radio" value="女" name="gender"/>女<br />
  爱好:<input type="checkbox" value="篮球" name="hobby" id="lanqiu" checked/>篮球
      <input type="checkbox" value="足球" name="hobby" id="zuqiu"/>足球
      <input type="checkbox" value="排球" name="hobby" />排球<br />
  请选择图片:<input type="file" name="photo"/><br />
  图片按钮:<input type="image" src="../images/1.png"/><br />
  籍贯:<select name="city">
  <option value="1">南京市</option>
  <option value="2">北京市</option>
  <option value="3">上海市</option>
</select>
  <br />
  自我介绍:<textarea cols="10" rows="5" name="info"></textarea><br />
  <button type="button">按钮1</button>
  <input type="button" value="按钮2"/>
  <input type="submit" value="提交按钮"/>
  <input type="reset" value="重置按钮"/>
</form>
<div id="app" class="aaa bbb ccc">
  Hello1
</div>
<script type="text/javascript" src="../scripts/jquery-3.7.0.js"></script>
<script type="text/javascript">
  $(function(){
    // attr获取属性值
    // console.log($(":text").attr('name'));
    // attr设置属性值
    // $(":text").attr("id", "username");
    // console.log($("#lanqiu").attr("checked"));
    // console.log($("#lanqiu").prop("checked"));
    // console.log($("#zuqiu").prop("checked"));
    // $("#zuqiu").prop("checked",true);
    // 根据属性名移除属性
    // $(":text").removeAttr("id");

    // attr("class")： 获取class属性的值，即样式名称
    // console.log($("#app").attr("class"));
    // attr("class","样式名")：修改class属性的值，修改样式
    // $("#app").attr("class","aaa bbb");
    // addClass("样式名")： 添加样式名称,
    // $("#app").addClass("ddd");
    // css()： 添加具体的样式
    // $("#app").css("background-color", "red");
    // removeClass(class)： 移除样式名称
    // $("#app").removeClass("bbb");
  });
</script>
</body>
</html>